<template>
	<view class="login">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="name-wrapper">
			<text>昵称</text>
			<input v-model="nickName" type="nickname" class="weui-input" placeholder="请输入昵称" />
		</view>

		<view class="">
			<button @click="submit">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				nickName: '',
				userId:''
			}
		},
		mounted() {
			this.toLogin()
		},
		methods: {
			
			//用户点击登录
			toLogin(){
				uni.login({
					success: async res => {
						// 利用小程序登陆，配合code码进行用户登陆操作，并返回用户的token值
				
						const result = await this.$u.api.getWxLogin({
							code: res.code
						});
				
				
						// 将token值进行本地缓存存储
						uni.setStorage({
							key: 'token',
							data: result.token,
							success: async () => {
								this.userId = result.user.id
							}
						});
					}
				});
			},
			
			//选择头像的回调函数
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(e);
				this.avatarUrl = avatarUrl
			},
			//点击提交按钮的回调函数
			submit() {
				if (this.nickName != "" && this.avatarUrl != "") {
					let form = {
						token: uni.getStorageSync('token'),
						userpic: this.avatarUrl,
						nickname: this.nickName
					}
					const userpic = this.avatarUrl
					const nickname = this.nickName
					uni.setStorageSync('userInfo', {
						
						userpic,
						nickname
					});
					
					this.$store.commit('user/setUserInfo', {
						userpic,
						nickname
					})
					
					this.$u.api.postUpdateUser(form)
					
			
				}else{
					uni.showToast({
						title:"请填写内容"
					})
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.avatar-wrapper {
		width: 200rpx;
		height: 200rpx;
		margin: 100rpx auto;
		padding: 0;

		.avatar {
			width: 100%;
			height: 100%;
		}
	}

	.name-wrapper {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-top: solid 1px #dfd2d2;
		border-bottom: solid 1px #dfd2d2;
		margin: 20rpx;

		.weui-input {
			display: inline-block;
			width: 300rpx;
			margin-left: 40rpx;
			font-size: 35rpx;
		}
	}
</style>